<template>
  <div class="content">
    <el-table
      :data="tableData"
      border
      style="width: 2000px"
      v-if="!isCheck"
      :row-class-name="rowClass"
    >
      <!-- 表格数据渲染 -->
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
        :width="item.width ? item.width : 175"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path: item.url, query: { info: scope.row } }"
            v-if="item.isRouter"
            >{{ scope.row[titleList[item.id]] }}
          </router-link>
          <template v-else-if="item.isbtn">
            <el-button
              type="info"
              size="mini"
              v-if="scope.row.document_number === 0"
              @click="toFile(scope.row.documentId)"
              >无附件</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-else
              @click="toFile(scope.row.documentId)"
              >附件({{ scope.row.document_number }})</el-button
            >
          </template>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>

      <!-- 按钮组件 -->
      <el-table-column
        v-if="btnState == 1"
        label="管理"
        :width="btnList.length * selWidth.tools"
      >
        <template slot-scope="scope">
          <BtnList
            :btnList="btnList"
            :rowObj="scope.row"
            @gendanGetData="gendanGetData"
            @Delorder="Delorder"
            @DelorderGoods="DelorderGoods"
            @OrderReceived="OrderReceived"
            @Delpool='Delpool'
            @aa="aa"
            @refreshPage="refreshPage"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="btnState == 2"
        label="管理"
        :width="2 * selWidth.tools"
      >
        <template slot-scope="scope">
          <GoodsBtnList :url="url" :rowObj="scope.row" @reshow="reshow" />
        </template>
      </el-table-column>
    </el-table>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 10px"
      :height="(limit + 1) * 60"
      @selection-change="handleSelectionChange"
      v-else
    >
      <el-table-column type="selection" :width="selWidth.checkBox">
      </el-table-column>
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
        :width="item.width ? item.width : 150"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path: item.url, query: { info: scope.row } }"
            v-if="item.isRouter"
            >{{ scope.row[titleList[item.id]] }}
          </router-link>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-if="btnState == 1"
        label="管理"
        :width="btnList.length * selWidth.tools"
      >
        <template slot-scope="scope">
          <BtnList
            :btnList="btnList"
            :rowObj="scope.row"
            @gendanGetData="gendanGetData"
            @Delorder="Delorder"
            @DelorderGoods="DelorderGoods"
            @OrderReceived="OrderReceived"
            @Delpool='Delpool'
            @aa="aa"
            @refreshPage="refreshPage"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="btnState == 2"
        label="管理"
        :width="2 * selWidth.tools"
      >
        <template slot-scope="scope">
          <GoodsBtnList :url="url" :rowObj="scope.row" @reshow="reshow" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import BtnList from "../components/TableBtn.vue";
import GoodsBtnList from "../components/GoodsComponent/GoodsTools";
import { mapMutations } from "vuex";

export default {
  name: "List",
  data() {
    return {
      checkArr: [],
      Deleted: [],
    };
  },

  components: {
    BtnList,
    GoodsBtnList,
  },

  created() {},

  props: {
    // 表格模拟数据
    tableData: Array,
    // 按钮
    btnList: Array,
    // 表格模拟数据属性名
    titleList: Array,
    // 跳转路由
    linklist: Array,
    isCheck: Boolean,
    // 选择管理框宽度
    selWidth: {
      type: Object,
      default: () => {
        return {
          checkBox: 55,
          tools: 50,
        };
      },
    },
    // 管理按钮组件状态选择
    btnState: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 7,
    },
    // goods相关链接
    url: String,
  },
  methods: {
    ...mapMutations("callbackStore", ["setDeletedData"]),

    handleSelectionChange(arr) {
      console.log(arr);
      this.checkArr = [];
      arr.forEach((item) => {
        if (item.customer_id) {
          this.checkArr.push(item.customer_id);
        } else if (item.id) {
          this.checkArr.push(item.id);
        }
      });
      this.$emit("getCheck", this.checkArr);
      console.log(this.checkArr);
      //回收站需要的id
      this.Deleted = [];
      arr.forEach((item) => {
        if (item.id) {
          this.Deleted.push(item);
        }
      });
      this.setDeletedData(this.Deleted);
    },
    rowClass({ row }) {
      if (row.documentTips === "已跟单") {
        return "table_tr";
      }
    },
    gendanGetData() {
      this.$emit("gendanGetData");
    },
    // 订单删除
    Delorder() {
      this.$emit("Delorder");
    },
    // 订单商品删除
    DelorderGoods() {
      this.$emit("DelorderGoods");
    },
    // 订单到款
    OrderReceived() {
      this.$emit("OrderReceived");
    },
    // 当某个单元格被双击时
    editInfo() {},
    // goods重渲染
    reshow() {
      this.$emit("reshow");
    },
    // 公海删除
    Delpool(){
      this.$emit('Delpool')
    },


    toFile(documentary_id) {
      console.log(documentary_id);
      this.$router.push({
        path: "/gendan/gendanfile",
        query: { documentary_id },
      });
    },
    aa() {
      this.$emit("bb");
      console.log("bb");
    },
    // 重新渲染页面
    refreshPage() {
      this.$emit("moneyrefresh");
    },
  },
};
</script>

<style lang="scss">
.table_tr,
.table_tr a,
.table_tr span {
  color: #ccc;
}
/* .el-table__body-wrapper {
  height: 560px !important;
} */
</style>